<template>
  <el-menu
      mode="horizontal"
      :ellipsis="false"
      class="custom-menu"
      background-color="#409EFF"
      text-color="#fff"
      active-text-color="#fff"
      router
  >
    <el-menu-item index="/user/user_home">首页</el-menu-item>
    <el-menu-item index="/user/user_notice">网站公告</el-menu-item>
    <el-menu-item index="/user/user_team">预约搬家</el-menu-item>
    <el-menu-item index="/user/user_charge">搬家收费</el-menu-item>
<!--    <el-menu-item index="5">在线咨询</el-menu-item>-->
    <div class="flex-grow" />
    <el-dropdown style="cursor: pointer">
      <div style="padding-right: 20px; display: flex; align-items: center">
        <img
            style="width: 40px; height: 40px; border-radius: 50%"
            :src=userInfo.avatar
            alt=""
        />
        <span style="margin-left: 5px; color: white">{{
            userInfo.username
          }}</span>
        <el-icon color="#fff"><arrow-down /></el-icon>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="router.push('/user/person')"
          >个人资料</el-dropdown-item
          >
          <el-dropdown-item @click="router.push('/user/password')"
          >修改密码</el-dropdown-item
          >
          <el-dropdown-item @click="router.push('/user/order')"
          >我的订单</el-dropdown-item
          >
          <el-dropdown-item @click="userLogout()">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </el-menu>
</template>

<script setup>
import {User, SwitchButton, ArrowDown,} from "@element-plus/icons-vue";
import {logout} from "@/net/index.js";
import router from "@/router/index.js";

const userInfo = JSON.parse(window.localStorage.getItem('user'))
function userLogout(){
  logout(()=>router.push('/'))
}
</script>

<style scoped>
.custom-menu {

  padding: 0 200px;
}

.flex-grow {
  flex-grow: 1;
}

:deep(.el-menu-item) {
  padding: 0 30px !important;  /* 调整左右内边距 */
  margin: 0 10px;  /* 添加左右外边距 */
  height: 60px;    /* 调整菜单项高度 */
  line-height: 60px;  /* 保持文字垂直居中 */
}
</style>
